layui.config({
    base: '../../layui/' //此处路径请自行处理, 可以使用绝对路径
}).use(['jquery', 'form', 'layer', 'element'], function () {
    const form = layui.form
        , layer = layui.layer
        , $ = layui.jquery
        , element = layui.element
    ;
    const allUploadDiv = $("#allUploadDiv");
    $(function () {
        //日志实时更新
        logWebsocket();
        //上传进度实时更新
        uploadWebsocket();
        //查询当前部署状态
        lastDeploy();
    });

    function uploadWebsocket() {
        //websocket对象
        let websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + sessionStorage.getItem('hostName') + "/websocket/logging");
        } else {
            console.error("不支持WebSocket");
        }
        //连接发生错误的回调方法
        websocket.onerror = function (e) {
            console.error("WebSocket连接发生错误", e);
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("WebSocket连接成功")
        };
        //数组里面已经有的id就更新进度，没有就拼接html
        let list = [];
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            let ele = layui.element;
            //追加
            if (event.data) {
                let data = $.parseJSON(event.data);
                if (data.table == "uploadjar") {
                    let html = "";
                    let id = data.id;
                    //不存在
                    if (list.indexOf(id) == -1) {
                        list.push(id)
                        html = html + "<div class=\"layui-form-item\" style=\"position: absolute;margin-top: 10px;height: 30px;width: 650px\">\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 10px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">部署ip:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"ip" + id + "\" style=\"color: #108da0\">" + data.ip + "</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 200px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">项目名称:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"projectName" + id + "\" style=\"color: #108da0\">" + data.projectName + "</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 500px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">总大小:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"fileSize" + id + "\" style=\"color: #108da0\">" + data.fileSize + "</span>\n" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "        <div class=\"layui-form-item\" style=\"position: absolute;margin-top: 40px;height: 30px;width: 650px\">\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 10px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">上传速度:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"speed" + id + "\">" + data.speed + "</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 200px;position: absolute\">\n" +
                            "                <div style=\"display:inline\">\n" +
                            "                    <span style=\"color: #a01924\">上传进度:&nbsp;&nbsp;&nbsp;&nbsp;</span>\n" +
                            "                    <div class=\"layui-progress layui-progress-big\" lay-showpercent=\"true\" style=\"float:right;width: 200px\" lay-filter=\"speedOfProgress" + id + "\">\n" +
                            "                        <div class=\"layui-progress-bar\" id=\"speedOfProgress" + id + "\" lay-percent=\"" + data.speedOfProgress + "\"></div>\n" +
                            "                    </div>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 500px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">已上传:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"transfered" + id + "\" style=\"color: #108da0\">" + data.transfered + "</span>\n" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "        <fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 100px;\"></fieldset>";
                        allUploadDiv.append(html);
                    } else {
                        //更新
                        const speed = $("#speed" + id);
                        speed.html(data.speed);
                        const transfered = $("#transfered" + id);
                        transfered.html(data.transfered);
                        const speedOfProgress = $("#speedOfProgress" + id);
                        speedOfProgress.html(data.speedOfProgress);
                        ele.progress('speedOfProgress' + id, data.speedOfProgress);
                    }
                }
            }
        };
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("WebSocket连接关闭")
        };
    }

    //日志实时更新
    function logWebsocket() {

        //websocket对象
        let websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + sessionStorage.getItem('hostName') + "/websocket/mergeLogs");
        } else {
            console.error("不支持WebSocket");
        }

        //连接发生错误的回调方法
        websocket.onerror = function (e) {
            console.error("WebSocket连接发生错误", e);
        };
        //连接成功建立的回调方法
        websocket.onopen = function () {
            console.log("WebSocket连接成功")
        };
        //接收到消息的回调方法
        websocket.onmessage = function (event) {
            //追加
            if (event.data) {
                //日志内容
                let text = $("#loggingText");
                text.append(event.data);
                //滚动条自动到最底部
                let height = text[0].scrollHeight
                window.scrollTo(height, height);
                if (event.data.indexOf("全部批量部署完毕") != -1) {
                    console.log("部署完毕")
                    localStorage.setItem("status", "OFF");
                }
            }
        };
        //连接关闭的回调方法
        websocket.onclose = function () {
            console.log("WebSocket连接关闭")
        };
    }

    //查询当前部署状态
    function lastDeploy() {
        $.ajax({
            type: "get",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/deploy/getSuccess",//url
            success: function (result) {
                if (result.code == 0) {
                    const data = result.data;
                    let html = "";
                    for (item of data) {
                        html = html + "<div class=\"layui-form-item\" style=\"position: absolute;margin-top: 10px;height: 30px;width: 650px\">\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 10px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">部署ip:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"ip\" style=\"color: #108da0\">" + item.ip + "</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 200px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">项目名称:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"projectName\" style=\"color: #108da0\">" + item.projectName + "</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 500px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">总大小:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"fileSize\" style=\"color: #108da0\">" + item.fileSize + "</span>\n" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "        <div class=\"layui-form-item\" style=\"position: absolute;margin-top: 40px;height: 30px;width: 650px\">\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 10px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">上传速度:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"speed\">" + item.speed + "</span>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 200px;position: absolute\">\n" +
                            "                <div style=\"display:inline\">\n" +
                            "                    <span style=\"color: #a01924\">上传进度:&nbsp;&nbsp;&nbsp;&nbsp;</span>\n" +
                            "                    <div class=\"layui-progress layui-progress-big\" lay-showpercent=\"true\" style=\"float:right;width: 200px\" lay-filter=\"speedOfProgress\">\n" +
                            "                        <div class=\"layui-progress-bar\" id=\"speedOfProgress\" lay-percent=\"" + item.speedOfProgress + "\"></div>\n" +
                            "                    </div>\n" +
                            "                </div>\n" +
                            "            </div>\n" +
                            "            <div class=\"layui-inline\" style=\"margin-left: 500px;position: absolute\">\n" +
                            "                <span style=\"color: #a01924\">已上传:&nbsp;&nbsp;&nbsp;&nbsp;</span><span id=\"transfered\" style=\"color: #108da0\">" + item.transfered + "</span>\n" +
                            "            </div>\n" +
                            "        </div>\n" +
                            "        <fieldset class=\"layui-elem-field layui-field-title\" style=\"margin-top: 100px;\"></fieldset>"
                    }
                    allUploadDiv.append(html);
                }
                element.render();
            },
            error: function () {
                alert("异常！");
            }
        });
    }

});